<template>
  <div class="content">
    <div class="item">
      <label for="">存证编号：</label>
      <input type="text" v-model="form.id" placeholder="请输入唯一的存证编号" />
    </div>
    <div class="item">
      <label for="">授权验证码：</label>
      <input type="text" v-model="form.code" placeholder="请输入授权验证码" />
    </div>
    <div class="btn">
      <button @click="btnClick">验证</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
const form = ref({
  id: "",
  code: "",
});
const btnClick = () => {
  if (!form.value.id)
    return ElMessage({ type: "warning", message: "存证编号不能为空!" });
  if (!form.value.code)
    return ElMessage({ type: "warning", message: "授权验证码不能为空!" });
};
</script>

<style lang="less" scoped>
.content {
  height: 398px;
  width: 898px;
  text-align: center;
  margin: 0 auto 40px;
  border: 1px solid rgb(228, 228, 228);
  .item {
    input {
      width: 447px;
      height: 40px;
      padding: 0 0 0 15px;
    }
    input:focus {
      outline: none;
      border: 2px solid #0079fe;
    }
  }
  .item:first-child {
    margin: 20px 0 10px 0;
  }
  .item:nth-child(2) {
    margin: 0 0 0 -15px;
  }
  .btn {
    width: 200px;
    height: 40px;
    margin: 100px auto 0;
    button {
      width: 100%;
      height: 100%;
      background-color: #0079fe;
      color: white;
      border: none;
    }
  }
  .btn:hover button {
    background-color: #268fff;
    cursor: pointer;
  }
}
</style>